<!doctype html>
<html>

<head>
    <title>XKC</title>
    <meta charset="UTF-8">
    <style type="text/css">
    button1 {  
  width: 20rem;  
  padding:1rem;  
  background-color: #428bca;  
  border-color: #357ebd;  
  color: #fff;  
  -moz-border-radius: 10px;  
  -webkit-border-radius: 10px;  
  border-radius: 10px; /* future proofing */  
  -khtml-border-radius: 10px; /* for old Konqueror browsers */  
  text-align: center;  
  vertical-align: middle;  
  border: 1px solid transparent;  
  font-weight: 900;  
  font-size:125%  
}
body {
  margin: 0;
  font-family: Helvetica;
  background-color: #f7199a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
    </style>
</head>

<body>
    
    <canvas id="c"></canvas>
    <script>
    var c = document.getElementsByTagName('canvas')[0];
    var a = c.getContext('2d');   
    function plot_text(){
        a.font="30px Arial";
        a.strokeText("Hello World",10,50);
    }
    function plot(){
        e = []; 
        h = []; 
        O = c.width = innerWidth; 
        Q = c.height = innerHeight; 
        v = 32; 
        M = Math; 
        R = M.random; 
        C = M.cos; 
        Y = 6.3; 
        for (i = 0; i < Y; i += 0.2)
            h.push([O / 2 + 180 * M.pow(M.sin(i), 3), Q / 2 + 10 * -(15 * C(i) - 5 * C(2 * i) - 2 * C(3 * i) - C(4 * i))]);
        for (i = 0; i < v;) { 
            x = R() * O; y = R() * Q; 
            H = 80 * (i / v) + 280; 
            S = 40 * R() + 60; 
            B = 60 * R() + 20; 
            f = []; 
            for (k = 0; k < v;)
                f[k++] = { x: x, y: y, X: 0, Y: 0, R: 1 - k / v + 1, S: R() + 1, q: ~~(R() * v), D: 2 * (i % 2) - 1, F: 0.2 * R() + 0.7, f: "hsla(" + ~~H + "," + ~~S + "%," + ~~B + "%,.1)" }; e[i++] = f }
        function _(d) { 
            a.fillStyle = d.f; 
            a.beginPath(); 
            a.arc(d.x, d.y, d.R, 0, Y, 1); 
            a.closePath(); a.fill() }
        setInterval(function () { a.fillStyle = "rgba(0,0,0,.2)"; a.fillRect(0, 0, O, Q); for (i = v; i--;) { f = e[i]; u = f[0]; q = h[u.q]; D = u.x - q[0]; E = u.y - q[1]; G = M.sqrt(D * D + E * E); 10 > G && (0.95 < R() ? u.q = ~~(R() * v) : (0.99 < R() && (u.D *= -1), u.q += u.D, u.q %= v, 0 > u.q && (u.q += v))); u.X += -D / G * u.S; u.Y += -E / G * u.S; u.x += u.X; u.y += u.Y; _(u); u.X *= u.F; u.Y *= u.F; for (k = 0; k < v - 1;)T = f[k], N = f[++k], N.x -= 0.7 * (N.x - T.x), N.y -= 0.7 * (N.y - T.y), _(N) } }, 25);
        }
    
    </script>
    <button1 type="button" onclick="plot()">xkc & zc 60days</button1>
</br>
    <div align="center" vertical-align="middle">

        今天是情人节，同时也是计算机诞生的日子；</br>
        将计算机和情人节结合，送你一颗跳动的爱心，以后的日子请多关照。
        
        </div>
    </br>
    
</body>

</html>